<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jstl/fmt" prefix="fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<!DOCTYPE html>
<html>
<fmt:bundle basename="application">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>嘉礡医云</title>
        <link href="<%=basePath%>/images/favicon.ico" rel="shortcut icon" />
        <link rel="stylesheet" href="<%=basePath%>/plugins/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="<%=basePath%>/plugins/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="<%=basePath%>/plugins/flavr/flavr.css">
        <link rel="stylesheet" href="<%=basePath%>/plugins/iziModal/css/iziModal.min.css">
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        <link rel="stylesheet" href="<%=basePath%>/css/login/form-elements.css">
        <link rel="stylesheet" href="<%=basePath%>/css/login/style.css">
    </head>
    <body>

    <!-- Top content -->
    <div class="top-content">

        <!-- 发送 验证码model -->
        <div id="retrieve-code" style="display:none">
            <div class="box-body" style="margin:5px 0 -10px 0">
                <div class="login-box-body">
                    <div class="form-group has-feedback">
                        <input type="text" class="form-control" placeholder="请输入您的手机号码" id="phone" name="phone">
                    </div>
                    <div class="form-group has-feedback">
                        <input type="text" class="form-control" placeholder="请输入验证码" id="code" name="code">
                    </div>
                    <div class="row">
                        <div class="col-xs-8">
                            <div class="checkbox icheck">
                                <label class="">
                                    <div class="icheckbox_square-blue" aria-checked="false" aria-disabled="false" style="position: relative;">
                                        <input type="checkbox" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;">
                                        <ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;">
                                        </ins>
                                    </div>
                                </label>
                            </div>
                        </div>
                        <div class="col-xs-4">
                            <input type="button" id="btn" class="btn btn-primary btn-block btn-flat" value="获取验证码"/>
                        </div>
                    </div>
                    <div class="social-auth-links text-center">
                        <button type="button" class="btn btn-primary btn-block btn-flat" onclick="openPasswordModel();">确定</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 修改密码model -->
        <div id="retrieve-password" style="display:none">
            <div class="box-body" style="margin:5px 0 -10px 0">
                <div class="login-box-body">
                    <div class="form-group has-feedback hide">
                        <input type="text" class="form-control" id="phoneHide">
                    </div>
                    <div class="form-group has-feedback">
                        <input type="password" class="form-control" placeholder="请输入您的新密码" id="newPassword">
                    </div>
                    <div class="form-group has-feedback">
                        <input type="password" class="form-control" placeholder="请再次输入密码" id="oldPassword">
                    </div>
                </div>
            </div>
            <div class="box-footer text-right">
                <button data-iziModal-close class="btn btn-default">取消</button>
                <button type="button" class="btn bg-aqua" data-loading-text="保存中..." id="save" onclick="updatePassword()">保存</button>
            </div>
        </div>


        <div class="inner-bg">
            <div class="container">
                <div class="row">
                    <div class="col-sm-8 col-sm-offset-2 text">
                        <h1><strong>Gable</strong>嘉礡医云</h1>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6 col-sm-offset-3 form-box">
                        <div class="form-top">
                            <div class="form-top-left">
                                <h3>登录</h3>
                                <p>输入账号登录</p><!-- 手机号密码登录 -->

                            </div>
                            <div class="form-top-right">
                                <i class="fa fa-key"></i>
                            </div>
                        </div>
                        <div class="form-bottom">
                            <form id="form" role="form" action="login" method="post" class="login-form">
                                <div class="form-group">
                                    <label class="sr-only" for="username">登录</label>
                                    <input type="text" name="username" placeholder="请输入帐号" class="form-username form-control" id="username" value="${username}">
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="password">密码</label>
                                    <input type="password" name="password" placeholder="密码" class="form-password form-control" id="password">
                                </div>
                                    <%-- <p class="text-danger">${param.msg}</p> --%>
                                <p class="text-danger">${msg}</p>
                                <p>
                                    <button type="submit" class="btn">登录</button>
                            </form>
                            <a href="javascript:openCodeModel();" style="position: relative; left: 420px; top: 0px;" class="hide">忘记密码？</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Javascript -->
    <script src="<%=basePath%>/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="<%=basePath%>/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="<%=basePath%>/plugins/backstretch/jquery.backstretch.min.js"></script>
    <script src="<%=basePath%>/plugins/flavr/flavr.min.js"></script>
    <script src="<%=basePath%>/plugins/iziModal/js/iziModal.min.js"></script>
    <script src="<%=basePath%>/js/login/scripts.js"></script>
    <script type="text/javascript">
        /* 清空筛选条件缓存 */
        localStorage.setItem('search_params', null);
        localStorage.setItem('hospital_id', null);

        // 发送验证码model
        $("#retrieve-code").iziModal({
            title:"找回密码",
            headerColor: '#00c0ef',
            theme: '',  // light
            attached: '', // bottom, top
            icon: null,
            iconText: null,
            iconColor: '',
            rtl: false,
            width: 600,
            padding: 0,
            radius: 3,
            zindex: 1040,
            iframe: false,
            iframeHeight: 400,
            iframeURL: null,
            focusInput: false,
            group: '',
            loop: false,
            navigateCaption: true,
            bodyOverflow:false,
            navigateArrows: true, // closeToModal, closeScreenEdge
            history: false,
            restoreDefaultContent: false,
            autoOpen: false, // Boolean, Number
            bodyOverflow: false,
            fullscreen: true,
            openFullscreen: false,
            closeOnEscape: true,
            overlay: true,
            overlayClose: false,
            overlayColor: 'rgba(0, 0, 0, 0.4)',
            timeout: false,
            timeoutProgressbar: false,
            pauseOnHover: false,
            timeoutProgressbarColor: 'rgba(255,255,255,0.5)',
            transitionIn: 'comingIn',
            transitionOut: 'comingOut',
            transitionInOverlay: 'fadeIn',
            transitionOutOverlay: 'fadeOut',
            onFullscreen: function(){},
            onResize: function(){},
            onOpening: function(){},
            onOpened: function(){},
            onClosing: function(){},
            onClosed: function(){
                $("#phone").val("");
                $("#code").val("");
            }
        });


        // 找回密码model
        $("#retrieve-password").iziModal({
            title:"找回密码",
            headerColor: '#00c0ef',
            theme: '',  // light
            attached: '', // bottom, top
            icon: null,
            iconText: null,
            iconColor: '',
            rtl: false,
            width: 600,
            padding: 0,
            radius: 3,
            zindex: 1040,
            iframe: false,
            iframeHeight: 400,
            iframeURL: null,
            focusInput: false,
            group: '',
            loop: false,
            navigateCaption: true,
            bodyOverflow:false,
            navigateArrows: true, // closeToModal, closeScreenEdge
            history: false,
            restoreDefaultContent: false,
            autoOpen: false, // Boolean, Number
            bodyOverflow: false,
            fullscreen: true,
            openFullscreen: false,
            closeOnEscape: true,
            overlay: true,
            overlayClose: false,
            overlayColor: 'rgba(0, 0, 0, 0.4)',
            timeout: false,
            timeoutProgressbar: false,
            pauseOnHover: false,
            timeoutProgressbarColor: 'rgba(255,255,255,0.5)',
            transitionIn: 'comingIn',
            transitionOut: 'comingOut',
            transitionInOverlay: 'fadeIn',
            transitionOutOverlay: 'fadeOut',
            onFullscreen: function(){},
            onResize: function(){},
            onOpening: function(){},
            onOpened: function(){},
            onClosing: function(){},
            onClosed: function(){
                $("#phoneHide").val("");
                $("#newPassword").val("");
                $("#oldPassword").val("");
            }
        });

        // 点击忘记密码弹出发送验证码model框
        function openCodeModel(){
            $("#retrieve-code").iziModal('open');
        }

        // 验证码倒计时60秒
        var wait=60;
        function sendCode(obj) {
            if (wait == 0) {
                obj.removeAttribute("disabled");
                obj.value="重新发送";
                wait = 60;
            } else {
                obj.setAttribute("disabled", true);
                obj.value="正在发送(" + wait + ")";
                wait--;
                setTimeout(function() {
                        sendCode(obj)
                    },
                    1000)
            }
        }

        // 倒计时
        $("#btn").click(function(){
            var phone = $("#phone").val();	// 获取手机号码
            var partten = /^1[34578]\d{9}$/;
            // 验证手机号码
            if(phone == null || phone ==""){
                new $.flavr({content:"请输入手机号码",closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'确定',style:'danger',action:function(){}}]});
            }else if(!partten.test(phone)){
                new $.flavr({content:"手机号码格式有误",closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'确定',style:'danger',action:function(){}}]});
            }else{
                var obj = this;
                // 请求调用验证码
                $.ajax({
                    url:'<%=basePath%>/user/sendCode',
                    type:'POST',
                    data:{"phone":phone,"flag":0},	// 参数
                    async : false, 	//默认为true 异步
                    success:function(data){
                        try {
                            if(data.ret == 1){
                                sendCode(obj);		// 开始计时
                            }else {
                                new $.flavr({content:data.msg,closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'确定',style:'danger',action:function(){}}]});
                            }
                        } catch (error) {
                            new $.flavr({content:"操作遇到问题",closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'确定',style:'danger',action:function(){}}]});
                        }
                    },
                    failure : function() {
                        new $.flavr({content:"操作遇到问题",closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'操作失败',style:'danger',action:function(){}}]});
                    }
                });
            }
        });

        // 点击确认后提交验证码校验成功后弹出修改 密码Model
        function openPasswordModel(){
            var phone = $("#phone").val();	// 获取手机号码
            var partten = /^1[34578]\d{9}$/;
            var code = $("#code").val();	// 获取验证码
            if(phone == null || phone ==""){
                new $.flavr({content:"请输入手机号码",closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'确定',style:'danger',action:function(){}}]});
            }else if(!partten.test(phone)){
                new $.flavr({content:"手机号码格式有误",closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'确定',style:'danger',action:function(){}}]});
            }else if(code == null || code == ""){
                new $.flavr({content:"请输入验证码",closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'确定',style:'danger',action:function(){}}]});
            }else{
                // 请求校验验证码
                $.ajax({
                    url:'<%=basePath%>/user/checkCode',
                    type:'POST',
                    data:{"phone":phone,"code":code},	// 参数
                    async : false, 	//默认为true 异步
                    success:function(data){
                        try {
                            if (data.ret == 1) {
                                $("#retrieve-code").iziModal('close');
                                $("#retrieve-password").iziModal('open');
                                $("#phoneHide").val(phone);	// 赋值隐藏域手机号码
                            }else{
                                new $.flavr({content:data.msg,closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'确定',style:'danger',action:function(){}}]});
                            }
                        } catch (error) {
                            new $.flavr({content:"操作遇到问题",closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'确定',style:'danger',action:function(){}}]});
                        }
                    },
                    failure : function() {
                        new $.flavr({content:"操作遇到问题",closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'操作失败',style:'danger',action:function(){}}]});
                    }
                });
            }
        }

        // 找回密码
        function updatePassword(){
            var phone = $("#phoneHide").val();	// 获取手机号码
            var newPassword = $("#newPassword").val();	// 获取新密码
            var oldPassword = $("#oldPassword").val();	// 获取旧密码
            if(phone == null || phone ==""){
                new $.flavr({content:"手机号码未获取到",closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'确定',style:'danger',action:function(){}}]});
            }else if(newPassword == null || newPassword ==""){
                new $.flavr({content:"请输入新密码",closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'确定',style:'danger',action:function(){}}]});
            }else if(newPassword.length < 6 || newPassword.length > 12){
                new $.flavr({content:"密码位数请控制在6~12位之间",closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'确定',style:'danger',action:function(){}}]});
            }else if(newPassword != oldPassword){
                new $.flavr({content:"两次密码输入不一致",closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'确定',style:'danger',action:function(){}}]});
            }else{
                // 找回密码
                $.ajax({
                    url:'<%=basePath%>/user/updatePasswordByPhone',
                    type:'POST',
                    data:{"phone":phone,"password":newPassword},	// 参数
                    async : false, 	//默认为true 异步
                    success:function(data){
                        try {
                            if (data.ret == 1) {
                                new $.flavr({content:data.msg,closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'确定',style:'success',action:function(){}}]});
                                $("#retrieve-password").iziModal('close');
                            }else{
                                new $.flavr({content:data.msg,closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'确定',style:'danger',action:function(){}}]});
                            }
                        } catch (error) {
                            new $.flavr({content:"操作遇到问题",closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'确定',style:'danger',action:function(){}}]});
                        }
                    },
                    failure : function() {
                        new $.flavr({content:"操作遇到问题",closeOverlay:true,closeEsc:true,autoclose:true,timeout:1500,buttons:[{text:'操作失败',style:'danger',action:function(){}}]});
                    }
                });
            }
        }
    </script>
    </body>
</fmt:bundle>
</html>